<template>
  <div class="maps">
    <div class="selectMap" v-if="$route.path !== '/complain'">
      <el-select v-model="value" class="m-2" placeholder="运营数据">
        <el-option
          v-for="item in seValue"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div
      :class="eChart"
      :style="`width: 100%; height:100%;zoom:${zoom};transform:scale(${
        1 / zoom
      });transform-origin:0 0`"
    ></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts"; // echarts@v5.2.2
import echartGL from "echarts-gl"; // echarts-gl@v2.0.8
import { ref, reactive, defineProps, onMounted, watch } from "vue";
import { getOperation } from "../api/main"; //封装的请求
const props = defineProps({
  list: {
    type: Array,
  },
});

const value = ref("");

let zoom = ref(""); //缩放还原初始值

const eChart = ref("eChart" + Date.now() + Math.random()); //动态切换盒子

//地图选中当前城市名称
let cityName = ref();

//动态地图内容数组
let dynamicFiveTo = ref();

//四月5GtoB网络运行情况
const wuhanFiveTo = ref([
  //武汉
  // [
  //   {
  //     equipment: "MEC/UPF",
  //     company: "孝感米婆婆",
  //     industry: "食品",
  //     val: "1",
  //   },
  //   {
  //     company: " 东风岚图",
  //     industry: "车企",
  //     val: "4",
  //   },
  //   {
  //     company: " 联通华盛通信有限公司",
  //     industry: "通信",
  //     val: "1",
  //   },
  //   {
  //     equipment: "武汉MEC/UPF ",
  //     company: "凡谷电子",
  //     industry: " 电子",
  //     val: "0",
  //   },
  //   {
  //     company: "武汉联影智融医疗科技",
  //     industry: " 医疗",
  //     val: "6",
  //   },
  // ],
  // //十堰
  // [
  //   {
  //     equipment: "MEC/UPF",
  //     company: "十堰东风汽车装备车间",
  //     industry: "车企",
  //     val: "36",
  //   },
  // ],
  // //宜昌
  // [
  //   {
  //     equipment: "MEC/UPF",
  //     company: "东土科技",
  //     industry: "电子",
  //     val: "0",
  //   },
  // ],
]);

// 视觉映射组件
const visualMap = [
  {
    type: "continuous", // 连续型视觉映射组件
    show: false, // 是否显示 visualMap-continuous 组件
    seriesIndex: 0, // 指定取哪个系列的数据
    text: ["High", "Low"], // 两端的文本
    calculable: true, // 是否显示拖拽用的手柄
    max: 4000, // 指定 visualMapContinuous 组件的允许的最大值
    // 定义 在选中范围中 的视觉元素
    inRange: {
      color: ["#87aa66", "#eba438", "#d94d4c"], // 图元的颜色的集合
    },
  },
];

// 用于鼠标的旋转，缩放等视角控制
const viewControl = {
  rotateSensitivity: 0, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。
  zoomSensitivity: 0, // 缩放操作的灵敏度，值越大越灵敏。
  panSensitivity: 0, // 平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度
  projection: "perspective", // 透视投影
  autoRotate: false, // 是否开启视角绕物体的自动旋转查看
  autoRotateDirection: "cw", // 物体自转的方向: 从上往下看是顺时针方向
  autoRotateSpeed: 10, // 物体自转的速度: 角度 / 秒
  autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔.在开启 autoRotate 后有效
  damping: 0.8, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。
  // panMouseButton: 'left',     // 平移操作使用的鼠标按键
  // rotateMouseButton: 'middle', // 旋转操作使用的鼠标按键
  // distance: 100,              // 默认视角距离主体的距离，在 projection 为'perspective'的时候有效。
  // minDistance: 40,            // 视角通过鼠标控制能拉近到主体的最小距离。
  // maxDistance: 400,           // 视角通过鼠标控制能拉远到主体的最大距离
  // orthographicSize: 100,      // 正交投影的大小。 projection 为'orthographic'的时候有效。
  // maxOrthographicSize: 20,    // 正交投影缩放的最大值。 projection 为'orthographic'的时候有效。
  // minOrthographicSize: 400,   // 正交投影缩放的最小值。 projection 为'orthographic'的时候有效。
  // alpha: 4,                   // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
  // minAlpha: 5,                // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。
  // maxAlpha: 90,               // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。
  // beta: 4,                    // 视角绕 y 轴，即左右旋转的角度。
  // minBeta: -80,               // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。
  // maxBeta: 80,                // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。
  // center: [0,0,0],            // 视角中心点，旋转也会围绕这个中心点旋转
  animation: true, // 是否开启动画。
  animationDurationUpdate: 1000, // 过渡动画的时长。
  animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。
};

const label = {
  show: true, // 是否显示市
  borderWidth: 0, // 文字的描边宽度。
  borderColor: "#ffffff", // 文字的描边颜色。
  color: "#ffffff", // 文字颜色
  fontSize: 10, // 文字大小
  fontFamily: "sans-serif", // 文字的字体系列。
  fontWeight: "normal", // 文字字体的粗细。
};

const itemStyle = {
  opacity: 1,
  color: "#488DF1", // 地图颜色
  borderWidth: 1, // 分界线wdith
  borderColor: "#6BECF5", // 分界线颜色
};

const emphasis = {
  //鼠标经过高亮显示
  label: {
    show: true, // 是否显示高亮
    color: "#ffffff", // 高亮文字颜色
    fontSize: 16, // 文字的字体大小
    // formatter: (params) => {
    //   if (mapData.length > 0) {
    //     mapData.map((item) => {
    //       if (item.name === params.name) {
    //         this.transData.orgNo = item.orgNo;
    //         this.transData.name = item.name;
    //         this.transData.value = item.value;
    //       }
    //     });
    //   }
    //   const name = params.name;
    //   return `${name}`;
    // },
  },
  itemStyle: {
    color: "#37B8E0", // 地图高亮颜色
    // borderColor: "red",
    // borderWidth: 4,
  },
};

const select = {
  label: {
    show: true, // 是否显示高亮
    // color: "#ffffff", // 高亮文字颜色
    fontSize: 16, // 文字的字体大小
  },
  itemStyle: {
    color: "red", // 地图高亮颜色
    areaColor: "yellow",
    borderColor: "#f18355",
    borderWidth: "3",
  },
};

const light = {
  // 场景主光源的设置
  main: {
    color: "#fff", // 主光源的颜色
    intensity: 1.2, // 主光源的强度
    shadow: false, // 主光源是否投射阴影
    shadowQuality: "high", // 阴影的质量
    alpha: 55, // 主光源绕 x 轴，即上下旋转的角度
    beta: 10, // 主光源绕 y 轴，即左右旋转的角度
  },
  // 全局的环境光设置
  ambient: {
    color: "#fff", // 环境光的颜色
    intensity: 0.3, // 环境光的强度
  },
};

// const geo = {
//   type: "map3D", //地图属性
//   map: "湖北", // 地图类型。
//   roam: false, // 是否允许缩放
//   boxDepth: 90, // 三维地理坐标系组件在三维场景中的深度
//   viewControl, // 用于鼠标的旋转，缩放等视角控制
//   label, // 标签的相关设置。
//   itemStyle, // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等
//   emphasis, // 鼠标 hover 高亮时图形和标签的样式。
//   light, // 光照相关的设置。
//   select,
//   data: [

//   ],
// };

const geo = {
  type: "map3D", //地图属性
  name: "湖北", //名称
  map: "湖北", // 地图类型。
  boxDepth: 94, // 地图倾斜度
  viewControl, // 用于鼠标的旋转，缩放等视角控制
  label, // 标签的相关设置。
  itemStyle, // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等
  emphasis, // 鼠标 hover 高亮时图形和标签的样式。
  light, // 光照相关的设置。
  boxWidth: 94,
  boxHeight: 1,
  regionHeight: 5, // 地图高度
  top: -10,
  left: 0,
  shading: "realistic", // 真实渲染引擎 有光照效果
  // 材质贴图 配置
  realisticMaterial: {
    // detailTexture: this.bg,
    // detailTexture: 'assets/img/map2.png'
    // metalness: 1,
    // roughness: 1
  },
  temporalSuperSampling: {
    //选中地图抖动效果
    enable: false,
  },
  // data: [
  //   { name: "宜昌", value: [111.290843, 30.702636, 600] },
  //   { name: "孝感市	", value: [113.926655, 30.926423, 200] },
  //   { name: "十堰市	", value: [110.787916, 32.646907, 100] },
  //   { name: "荆门市	", value: [112.204251, 31.03542, 150] },
  //   { name: "仙桃市	", value: [113.453974, 30.364953, 350] },
  // ],
};

//模板字符串转为node节点
const createNode = (txt) => {
  const template = `${txt}`;
  let tempNode = document.createElement("div");
  tempNode.innerHTML = template;
  return tempNode.firstChild;
};

var mychartLife;
var flag = false;
const tooltip = {
  //状态栏
  // 鼠标是否可以进入悬浮框
  enterable: true,
  // 触发方式 mousemove, click, none, mousemove|click
  triggerOn: `click`,
  // item 图形触发， axis 坐标轴触发， none 不触发
  trigger: `item`,
  margin: 0,
  padding: 0,
  // 浮层隐藏的延迟
  hideDelay: 300,
  // 背景色
  // backgroundColor: `rgba(0,0,0,0)`,
  backgroundColor: `rgba(17, 21, 32, 0.7)`,
  textStyle: {
    color: "#ffffff",
  },
  // formatter: function (params) {
  //   return `<div class=chartLabel>
  //             <div class=title>${params.name}</div>
  //             <div class=label>到达时间：2020.10.11</div>
  //           </div>`;
  // },
  formatter: function (params) {
    return ` <div class="chartLabel" style="width: 367px; height: 163px; display: flex;">
      <div
        class="title"
        style="
          width: 30%;
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
        "
      >
        <div
          style="
            width: 100%;
            text-align: center;
            color: #028cda;
            font-size: 12px;
          "
        >
          接入点
        </div>
        <span
          style="
            word-break: normal;
            white-space: pre-wrap;
            width: 100%;
            text-align: center;
            color: #d6e3ea;
            font-size: 12px;
          "
          >${params.name}MEC/UPF</span
        >
      </div>
      <div
        class="label"
        style="
          width: 70%;
          height: 100%;
          border-left: 1px solid rgba(255, 255, 255, 0.2);
        "
      >
        <table
          style="
            display: block;
            height: 100%;
            border: 0;
            border-spacing: 0;
            border-collapse: collapse;
            cursor: default;
          "
        >
          <thead
            style="
              display: table;
              width: 100%;
              table-layout: fixed;
              height: 18%;
              height: 18%;
            "
            class="popupThead"
          >
            <tr
              style="
                display: table;
                width: 100%;
                table-layout: fixed;
                height: 12.4%;
                width: calc(100% + 2px);
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                color: #028cda;
              "
            >
              <th rowspan="2">客户</th>
              <th rowspan="2">行业</th>
              <th rowspan="2">在线用户数</th>
            </tr>
          </thead>
          <tbody
            class="popupTbody"
            style="
              display: block;
              height: 82%;
              border: 0;
              border-spacing: 0;
              border-collapse: collapse;
              cursor: default;
              overflow-y: scroll;
              overflow-x: hidden;
            "
          >
  
          </tbody>
        </table>
      </div>
    </div>`;
  },
};

const citySatisfy = reactive([{ name: "武汉市", data: [] }]);

//点击弹出框echarts图表
const modioLine = ref({
  legend: {
    data: [
      {
        name: "满意",
        icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
      },
      {
        name: "不满意",
        icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
      },
      {
        name: "一般",
        icon: "path://M700.416 686.592c-68.608 0-131.072-43.008-185.856-128C442.368 448 369.152 394.24 297.472 398.848c-111.104 7.168-206.336 155.648-233.984 212.48l-55.296-26.624c4.608-9.728 115.712-236.544 285.184-247.296C389.12 331.264 480.768 394.24 565.76 525.312c45.056 69.632 92.672 102.912 141.824 99.328 110.08-7.68 219.648-193.024 252.928-263.68l55.808 26.112c-5.632 11.776-135.68 287.232-304.128 299.008-4.096 0.512-8.192 0.512-11.776 0.512z",
      },
    ],
    textStyle: {
      color: "rgba(142, 147, 154, 1)",
    },
    top: 15,
  },
  grid: {
    left: "3%",
    right: "3%",
    top: "20%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    name: "日期",
    type: "category",
    data: ["", "1号", "2号", "3号", "4号", "5号", "6号", "8号", "10号", ""],
    boundaryGap: false,
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLine: {
      show: false,
      onZero: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
    axisLabel: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
  },
  yAxis: {
    type: "value",
    name: "人数",
    data: ["0", "10", "20", "30", "40"],
    interval: 10,
    max: 40,
    nameTextStyle: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
      align: "right",
    },
    axisLine: {
      show: true,
      onZero: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
        width: 0,
      },
    },
    axisTick: {
      // show : true,
      alignWithLabel: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
    axisLabel: {
      color: "rgba(142, 147, 154, 1)",
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.2)",
        type: "dashed",
      },
    },
  },
  series: [
    {
      data: ["-", 25, 31, 32, 28, 27, 32, 33, 26],
      name: "满意",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        show: true,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#E56137",
      },
      itemStyle: {
        color: "#E56137",
        borderType: "solid",
        shadowColor: "#E56137",
        shadowBlur: 10,
      },
    },
    {
      data: ["-", 13, 12, 5, 6, 16, 18, 9, 16],
      name: "不满意",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        show: true,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#06D9CC",
      },
      itemStyle: {
        color: "#06D9CC",
        borderType: "solid",
        shadowColor: "#06D9CC",
        shadowBlur: 10,
      },
    },
    {
      data: ["-", 8, 17, 19, 14, 12, 21, 21, 23],
      name: "一般",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 7,
      label: {
        show: true,
        position: "top",
        color: "rgba(186, 198, 204, 1)",
      },
      lineStyle: {
        color: "#069BD9",
      },
      itemStyle: {
        color: "#069BD9",
        borderType: "solid",
        shadowColor: "#069BD9",
        shadowBlur: 10,
      },
    },
  ],
});

const data = [
  { name: "南京市", value: 3802 },
  { name: "无锡市", value: 3802 },
  { name: "徐州市", value: 3412 },
  { name: "常州市", value: 3421 },
  { name: "苏州市", value: 3802 },
  { name: "南通市", value: 3432 },
  { name: "连云港市", value: 3512 },
  { name: "淮安市", value: 3802 },
  { name: "盐城市", value: 3802 },
  { name: "扬州市", value: 3802 },
  { name: "镇江市", value: 3802 },
  { name: "泰州市", value: 3612 },
  { name: "宿迁市", value: 3802 },
];
// 每个地级市的省会经纬度坐标
const gdGeoCoordMap = {
  南京市: [118.767413, 32.041544],
  无锡市: [120.301663, 31.574729],
  徐州市: [117.184811, 34.261792],
  常州市: [119.946973, 31.772752],
  苏州市: [120.619585, 31.299379],
  南通市: [120.864608, 32.016212],
  连云港市: [119.178821, 34.600018],
  淮安市: [119.021265, 33.597506],
  盐城市: [120.139998, 33.377631],
  扬州市: [119.421003, 32.393159],
  镇江市: [119.452753, 32.204402],
  泰州市: [119.915176, 32.484882],
  宿迁市: [118.275162, 33.963008],
};

/*
echarts@v5.2.2 和 echarts-gl@v2.0.8 组合创建的江苏省地图中在每
个地级市区域无法触发click事件，但是每个地级市中的柱状图可以触发cl
ick事件，如果采用如下方式不使用geo3D而是使用map3D绘制江苏省地图，
可以在每个地级市区
域触发click事件：
*/

//导入配置
const options = {
  backgroundColor: "#001C31",
  tooltip,
  series: [geo],
};

// 处理地级市的数据和坐标
function convertData(data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = gdGeoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
}

import hubei from "../assets/map/hubei"; //湖北省地图json文件

//重绘图表函数
const resizeHandler = () => {
  echart.resize();
};
//设置防抖，保证无论拖动窗口大小，只执行一次获取浏览器宽高的方法
const debounce = (fun, delay) => {
  let timer;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fun();
    }, delay);
  };
};

const cancalDebounce = debounce(resizeHandler, 500);
//页面成功渲染，开始绘制图表

// 声明
var echart = null;
// 创建画布
function createMap() {
  echart = echarts.init(document.getElementsByClassName(eChart.value)[0], {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  });
  echarts.registerMap("湖北", hubei);
  echart.setOption(options);
  //点击地图回调
  echart.on("click", function (params) {
    if (params.componentType === "series") {
      //赋值变量城市名称
      cityName.value = params.name;

      //动态赋值数组
      let newCity = ref([]);
      for (let i = 0; i < wuhanFiveTo.value.length; i++) {
        if (wuhanFiveTo.value[i].city + "市" == cityName.value) {
          newCity.value.push(wuhanFiveTo.value[i]);
        }
      }

      switch (cityName.value) {
        case "武汉市":
          dynamicFiveTo.value = newCity.value;
          break;
        case "十堰市":
          dynamicFiveTo.value = newCity.value;
          break;
        case "宜昌市":
          dynamicFiveTo.value = newCity.value;
          break;
      }

      if (document.getElementsByClassName("popupTbody")[0]) {
        mapPopup();
      }
    }
    flag = true;
  });
}

let markdata = ref(); //地图上添加标点图标

//弹出框动态渲染数据
const mapPopup = () => {
  //tbody弹出框 dom元素
  const popupTable = document.getElementsByClassName("popupTbody")[0];

  if (
    cityName.value == "武汉市" ||
    cityName.value == "十堰市" ||
    cityName.value == "宜昌市"
  ) {
    for (let i = 0; i < dynamicFiveTo.value.length; i++) {
      const trNode = document.createElement("tr");
      //添加样式
      trNode.style.cssText =
        "display: table;table-layout: fixed;height: 32px;width: calc(100% + 2px);min-width: 50px;text-align: center;font-size: 12px;color: #bac6cc;";

      trNode.innerHTML =
        "<td style='white-space : normal;'>" +
        dynamicFiveTo.value[i].customer +
        "</td>" +
        "<td>" +
        dynamicFiveTo.value[i].industry +
        "</td>" +
        "<td>" +
        dynamicFiveTo.value[i].onlineClientCount +
        "</td>";

      popupTable.appendChild(trNode);
    }
  } else {
    const nullVal = document.createElement("span");
    nullVal.innerHTML = "暂无数据";
    //无数据样式
    nullVal.style.cssText =
      " display:block;width: 256px;line-height: 128px;height: 128px;color:#ffffff;text-align: center;";
    popupTable.appendChild(nullVal);
  }
};

// function calcAll() {
//   if (document.getElementsByClassName("chartLabel")[0]) {
//     //删除存在的dom
//     document.getElementsByClassName("chartLabel")[0].remove();
//   }

//   document
//     .getElementsByClassName("echrtsMap")[0]
//     .appendChild(createNode(newDom));
//   mapPopup(); //调用插入内容
// }

//点击任意位置关闭区域弹窗  除开echrtsMap地图和chartLabel弹窗
// document.addEventListener("click", (e) => {
//   // //获取弹窗对象
//   const userCon = document.getElementsByClassName("chartLabel")[0];
//   const parentMap = document.getElementsByClassName("echrtsMap")[0];
//   //判断弹窗对象中是否包含点击对象
//   if (
//     userCon &&
//     !userCon.contains(e.target) &&
//     !parentMap.contains(e.target) &&
//     flag
//   ) {
//     //如果不包含则删除
//     userCon.remove();
//     flag = false;
//   }
// });

const seValue = [
  {
    value: "三月",
    label: "三月",
  },
  {
    value: "四月",
    label: "四月",
  },
  {
    value: "五月",
    label: "五月",
  },
];

//5GtoB网络运行情况
getOperation("beginCDate=2022-05-1 00:00:00&endCDate=2022-05-30 00:00:00").then(
  (r) => {
    console.log(r.data);

    wuhanFiveTo.value = r.data;

    //   fiveNetworkConten.value = r.data;
    // console.log(fiveNetworkConten.value)
    // console.log(r);
  }
);

onMounted(() => {
  createMap();

  if (document.body.style.zoom != "") {
    zoom.value = 1 / document.body.style.zoom;
  } else {
    zoom.value = 1;
  }

  window.addEventListener("resize", () => {
    zoom.value = 1;
    // zoom.value = 1 / document.body.style.zoom;
    cancalDebounce();
  });
});
</script>
<style lang='less' scoped>
.maps {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .selectMap {
    display: flex;
    justify-content: center;
    /deep/.el-select {
      width: 220px;
    }
    /deep/.el-select {
      background: transparent;
    }
    /deep/.el-input__wrapper {
      border-radius: 0;
      --el-input-inner-height: none;
      background: url("../assets/iconBorder/Slice 15.png");
      background-repeat: no-repeat;
      box-shadow: none;
    }
    /deep/.el-input__inner {
      text-align: center;
      --el-input-placeholder-text: 16px;
      --el-input-placeholder-color: #ffffff;
      --el-input-placeholder-width: 100px;
    }
  }
  .echrtsMap {
    width: 100%;
    height: 100%;
  }
}
</style>
<style>
.el-select {
  width: 150px;
  float: right;
}
.el-select {
  background: transparent;
}
.el-input__wrapper {
  background: #004064;
  box-shadow: none;
}
.el-input__inner {
  text-align: center;
  font-size: 14px;
  --el-input-placeholder-text: 14px;
  --el-input-placeholder-color: #d6e3ea;
}

.el-pagination {
  background-color: transparent;
}
.el-scrollbar {
  background: #01233c;
}
.el-popper {
  /* background: transparent !important; */
  border: 1px solid #185481 !important;
  /* border: none !important; */
}
.el-select-dropdown__item.hover {
  background: #028cda !important;
}
.el-select-dropdown__item {
  color: #d6e3ea;
}
</style>
